import BScroll from '@better-scroll/core/'
// 自动探测更新插件https://better-scroll.github.io/docs/zh-CN/plugins/observe-dom.html
import ObserveDOM from '@better-scroll/observe-dom'

import { onMounted, onUnmounted, ref } from 'vue'

// 在引入后一定要use一下插件
BScroll.use(ObserveDOM)

// 切记传入的一定要是一个ref对象 因为ref对象是响应式的 会在mounted的阶段得到dom元素
// options传递进来的对bs的配置项 emit方法，外部传递进来获取向外派发的自定义事件名称
export default function useScroll(wrapperRef, options, emit) {
  const scroll = ref(null)

  onMounted(() => {
    // debugger 如果需要调试可以打一个debugger会中断当前进程 阻止后续代码执行
    // 当debugger执行的时候 内容层实际是没有的 会导致不能滚动
    // 当bs2.0有了一个新特性，当dom变化的时候会自动刷新高度
    // 同样的还有observe-image插件
    // scroll也是一个ref对象，所以他的值要存在value上，才会被数据响应
    const scrollVal = scroll.value = new BScroll(wrapperRef.value, {
      observeDOM: true,
      // 使用扩展运算符传入options
      ...options
    })
    // 当大于0的时候，监听scroll事件，拿到滚动的位置
    if (options.probeType > 0) {
      scrollVal.on('scroll', (pos) => {
        // 将位置信息向外派发出去
        emit('scroll', pos)
      })
    }
  })

  // 对scroll实例卸载逻辑
  onUnmounted(() => {
    scroll.value.destroy()
  })

  // 将scroll实例暴漏出去
  return scroll
}
